import { useState, useEffect } from 'react'
import { Toast } from 'antd-mobile'

import NavBar from '@/components/NavBar'
import Input from '@/components/Input'
import Textarea from '@/components/Textarea'

import styles from './index.module.scss'

const EditInput = ({ config, onUpdate, onClose }) => {
  const [value, setValue] = useState(config.value || '')

  // 相当于：监听 config.value 值的变化，只要变化了，就用 config.value 的最新值
  //        来作为 value 的状态值
  // useEffect(() => {
  //   // 这个判断，用来避免 config.value 是 undefined 的情况
  //   if (config.value !== undefined) {
  //     setValue(config.value)
  //   }
  // }, [config.value])

  const onUpdateName = () => {
    const name = value.trim()
    if (name === '') return Toast.info('昵称不能为空')

    // 调用父组件中的方法，来更新昵称
    onUpdate(name)
  }

  return (
    <div className={styles.root}>
      <NavBar
        onClick={onClose}
        className="navbar"
        rightContent={
          <span className="commit-btn" onClick={onUpdateName}>
            提交
          </span>
        }
      >
        编辑{config.text}
      </NavBar>

      <div className="edit-input-content">
        <h3>{config.text}</h3>

        {config.text === '昵称' ? (
          <div className="input-wrap">
            <Input
              value={value}
              onChange={e => {
                setValue(e.target.value)
              }}
              placeholder="请输入"
            />
          </div>
        ) : (
          <Textarea
            placeholder="请输入"
            maxLength={99}
            value={value}
            onChange={e => setValue(e.target.value)}
          />
        )}
      </div>
    </div>
  )
}

export default EditInput
